<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS实现拖拽照片墙，实现照片互换位置</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #ul1 {
            width: 660px;
            position: relative;
            margin: 10px auto;
        }

        #ul1 li {
            width: 200px;
            height: 150px;
            float: left;
            list-style: none;
            margin: 10px;
            z-index: 1;
        }

        #ul1 .active {
            border: 1px dashed red;
        }
    </style>
    <script src="js/move.js"></script>
    <script>
        window.onload = function () {

            var oUl = document.getElementById('ul1');
            var aLi = oUl.getElementsByTagName('li');
            var aPos = [];
            var iMinZindex = 2;
            var i = 0;

            //布局转换

            //获取当前布局图片的位置
            for (i = 0; i < aLi.length; i++) {

                aPos[i] = { left: aLi[i].offsetLeft, top: aLi[i].offsetTop };
            }
            //布局转换必须要两个for循环才能完成
            for (i = 0; i < aLi.length; i++) {
                //为每个图片位置赋值
                aLi[i].style.left = aPos[i].left + 'px';
                aLi[i].style.top = aPos[i].top + 'px';

                //转换定位
                aLi[i].style.position = 'absolute';
                //offset的值经已经包括的margin值，所以要取消
                aLi[i].style.margin = '0';

                aLi[i].index = i;
            }

            //循环拖拽
            for (i = 0; i < aLi.length; i++) {
                setDrag(aLi[i]);
            }
            function setDrag(obj) {
                //当鼠标按下时
                obj.onmousedown = function (ev) {
                    //事件兼容
                    var oEvent = ev || event;

                    //将当前图片的堆叠顺序增加
                    obj.style.zIndex = iMinZindex++;
                    //计算鼠标相对于拖拽对象左上角的位置
                    var disX = oEvent.clientX - obj.offsetLeft;
                    var disY = oEvent.clientY - obj.offsetTop;

                    //当鼠标移动时
                    document.onmousemove = function (ev) {
                        //事件兼容
                        var oEvent = ev || event;

                        //重新为图片位置赋值
                        obj.style.left = oEvent.clientX - disX + 'px';
                        obj.style.top = oEvent.clientY - disY + 'px';

                        //清空所有li的样式
                        for (i = 0; i < aLi.length; i++) {
                            aLi[i].className = '';
                        }

                        //获取当前拖拽对象的最近目标对象
                        var oNear = findNearest(obj);
                        //如果存在
                        if (oNear) {
                            //将该对象的class赋于active
                            oNear.className = 'active';

                        }

                    };

                    //当鼠标松开时
                    document.onmouseup = function () {

                        document.onmousemove = null;
                        document.onmouseup = null;

                        //获取当前拖拽对象的最近目标对象
                        var oNear = findNearest(obj);

                        //如果有最近的碰撞对象
                        if (oNear) {

                            oNear.className = '';

                            //将最近目标对象的zIndex加加
                            //防止从背面移动
                            oNear.style.zIndex = iMinZindex++;

                            //当前拖拽对象移到目标对象之上时位于目标对象之上
                            obj.style.zIndex = iMinZindex++;

                            //将最近目标对象(oNear)移到当前对象(obj)位置
                            startMove(oNear, aPos[obj.index]);

                            //将当前对象(obj)移到最近目标对象(oNear)位置
                            startMove(obj, aPos[oNear.index]);


                            //交换当前拖拽对象与目标对象的index值
                            var tmp = 0;

                            tmp = obj.index;
                            obj.index = oNear.index;
                            oNear.index = tmp;

                            //如果没有最近的碰撞对象
                        } else {
                            //回到原位
                            startMove(obj, aPos[obj.index]);
                        }
                    };

                    //清除定时器
                    //防止图片在移位过程中再次拖动出现抖动
                    clearInterval(obj.timer);

                    //防止浏览器bug，拖拽时鼠标指针变形
                    return false;
                };
            }

            //碰撞检测
            function cdTest(obj1, obj2) {

                //目标1的左右上下轮廓位置
                var l1 = obj1.offsetLeft;
                var r1 = obj1.offsetLeft + obj1.offsetWidth;
                var t1 = obj1.offsetTop;
                var b1 = obj1.offsetTop + obj1.offsetHeight;

                //目标2的左右上下轮廓位置
                var l2 = obj2.offsetLeft;
                var r2 = obj2.offsetLeft + obj2.offsetWidth;
                var t2 = obj2.offsetTop;
                var b2 = obj2.offsetTop + obj2.offsetHeight;

                //对两个目标的外轮廓线进行对比,以检测是否碰撞到了
                if (r1 < l2 || l1 > r2 || b1 < t2 || t1 > b2) {

                    return false;

                } else {

                    return true;
                }
            }

            //计算拖拽对象和其它对象的连线距离
            function getDis(obj1, obj2) {

                var a = obj1.offsetLeft - obj2.offsetLeft;
                var b = obj1.offsetTop - obj2.offsetTop;

                return Math.sqrt(a * a + b * b);
            }

            //找到碰上的，并且最近的
            function findNearest(obj) {

                //为找出最小值做的参照数值
                var iMin = 999999999;

                var iMinIndex = -1;

                for (i = 0; i < aLi.length; i++) {

                    //避免自身与自身相碰撞,跳过检测
                    if (obj == aLi[i]) {
                        continue
                    };

                    //如果找到碰撞对象
                    if (cdTest(obj, aLi[i])) {
                        //计算拖拽对象与每个li的距离
                        var dis = getDis(obj, aLi[i]);
                        //如果当前参照距离大于某一个li与当前拖拽对象的距离
                        if (iMin > dis) {
                            //重新赋值参照距离(多次比对，得出最小值)
                            iMin = dis;
                            //得出最近目标的下标
                            iMinIndex = i;
                        }
                    }
                }

                //iMinIndex为-1，代表始终没有碰到
                if (iMinIndex == -1) {

                    return null;

                    //否则
                } else {

                    //返回碰撞最近的那个li
                    return aLi[iMinIndex];
                }
            }
        };
    </script>
</head>

<body>
    <ul id="ul1">
        <li><img src="https://www.duitang.com/blog/?id=1112623172" /></li>
        <li><img src="https://www.duitang.com/blog/?id=1112623172" /></li>
        <li><img src="https://www.duitang.com/blog/?id=1112623172" /></li>
        <li><img src="https://www.duitang.com/blog/?id=1112623172" /></li>
        <li><img src="https://www.duitang.com/blog/?id=1112623172" /></li>
        <li><img src="https://www.duitang.com/blog/?id=1112623172" /></li>
        <li><img src="https://www.duitang.com/blog/?id=1112623172" /></li>
        <li><img src="https://www.duitang.com/blog/?id=1112623172" /></li>
        <li><img src="https://www.duitang.com/blog/?id=1112623172" /></li>
        <li><img src="https://www.duitang.com/blog/?id=1112623172" /></li>
    </ul>
</body>

</html>
<!-- 以下是上面代码中引入的move.js文件，主要用于实现运动效果，代码如下：

function getStyle(obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr];
    } else {
        return getComputedStyle(obj, false)[attr];
    }
}

function startMove(obj, json, fn) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var bStop = true;
        for (var attr in json) {

            var iCur = 0;

            if (attr == 'opacity') {
                iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100);
            } else {
                iCur = parseInt(getStyle(obj, attr));
            }


            var iSpeed = (json[attr] - iCur) / 8;
            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);


            if (iCur != json[attr]) {
                bStop = false;
            }

            if (attr == 'opacity') {
                obj.style.filter = 'alpha(opacity:' + (iCur + iSpeed) + ')';
                obj.style.opacity = (iCur + iSpeed) / 100;
            } else {
                obj.style[attr] = iCur + iSpeed + 'px';
            }
        }

        if (bStop) {

            clearInterval(obj.timer);

            if (fn) {
                fn();
            }
        }
    }, 30)
} -->